import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:wallet_utils/base_router_config.dart';
import 'package:wallet_utils/color.dart';
import 'package:wallet_utils/el_refresh.dart';
import 'package:wallet_utils/event_bus_utils.dart';
import 'package:wallet_utils/hopson_cash_ts.dart';
import 'package:wallet_utils/ht_appbar.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:wallet_utils/ht_common_widgets.dart';
import 'package:wallet_utils/msg_event_utils.dart';
import 'package:wallet_utils/report_widget/click_widget.dart';
import 'package:wallet_utils/text_style.dart';
import 'logic.dart';

class RepaymentPage extends StatelessWidget {
  final logic = Get.put(RepaymentLogic());
  final state = Get.find<RepaymentLogic>().state;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: ColorManager.colorF4F5F6,
        appBar: htCommonAppbar(context, title: '我要还款'),
        body: elRefresh(
          height: 50.w,
          refreshController: state.refreshController,
          enablePullUp: false,
          onRefresh: () async {
            logic.getUserOrder();
          },
          child: GetBuilder<RepaymentLogic>(builder: (logic) {
            return Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                Container(
                  color: ColorManager.colorF4F5F6,
                  padding: EdgeInsets.only(left: 15.w, right: 15.w, top: 10.w),
                  child: Container(
                    height: 171.w,
                    // padding: EdgeInsets.only(left: 15.w, right: 15.w, bottom: 0.w),
                    child: Column(
                      children: [
                        Stack(
                          children: [
                            Image.asset(
                              'images/repayment_header.png',
                              fit: BoxFit.cover,
                            ),
                            Container(
                              margin: EdgeInsets.only(top: 30.w),
                              child: Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: [
                                  Container(
                                      alignment: Alignment.center,
                                      child: Text(
                                        '全部待还(元)',
                                        style: TextStyleUtils.style000000(
                                            fontSize: 14.sp),
                                      )),
                                  Container(
                                      alignment: Alignment.center,
                                      margin: EdgeInsets.only(top: 10.w),
                                      child: Text(
                                        logic.getTotalRepayAmount(),
                                        style: TextStyleUtils.style000000(
                                          fontSize: 32.sp,
                                          fontWeight: FontWeight.bold,
                                        ),
                                      )),
                                  Container(
                                      alignment: Alignment.center,
                                      margin: EdgeInsets.only(top: 5.w),
                                      child: Text(
                                        state.interest.length>0?"年利率（单利) : ${state.interest}%":'',
                                        style: TextStyleUtils.style999999(
                                            fontSize: 12.sp),
                                      )),
                                  SizedBox(
                                    height: 18.w,
                                  ),
                                  Row(
                                    mainAxisAlignment:
                                        MainAxisAlignment.spaceBetween,
                                    children: [
                                      Container(
                                          alignment: Alignment.center,
                                          margin: EdgeInsets.only(
                                              top: 5.w, left: 11.w),
                                          child: Text(
                                            "应还总服务费: ¥${logic.getTotalServiceAmount()} ",
                                            style: TextStyleUtils.style666666(
                                                fontSize: 12.sp),
                                          )),
                                      Container(
                                          alignment: Alignment.center,
                                          margin: EdgeInsets.only(
                                              top: 5.w, right: 11.w),
                                          child: Text(
                                            "应还总利息: ¥${logic.getTotalInterestAmount()} ",
                                            style: TextStyleUtils.style666666(
                                                fontSize: 12.sp),
                                          )),
                                    ],
                                  ),
                                ],
                              ),
                            ),
                          ],
                        ),
                      ],
                    ),
                  ),
                ),
                SizedBox(
                  height: 12.w,
                ),
                MediaQuery.removePadding(
                    context: context,
                    removeTop: true,
                    child: Container(
                      color: ColorManager.colorF4F5F6,
                      child: ListView.builder(
                        shrinkWrap: true,
                        itemCount: logic.repaymentList!.isNotEmpty
                            ? logic.repaymentList!.length
                            : 0,
                        physics: const NeverScrollableScrollPhysics(),
                        itemBuilder: ((context, index) {
                          return productItem(index);
                        }),
                      ),
                    )),
              ],
            );
          }),
        ));
  }

  Container productItem(int index) {
    return Container(
      height: 100.w,
      margin: EdgeInsets.only(left: 16.w, bottom: 10.w, right: 16.w),
      decoration: BoxDecoration(
        color: ColorManager.colorFFFFFF,
        borderRadius: BorderRadius.all(Radius.circular(5.0)),
      ),
      child: Stack(
        children: [
          Container(
              margin: EdgeInsets.only(top: 0.w, left: 280.sp),
              child: Image.asset(
                logic.getTagImge(logic.repaymentList![index].status),
                width: 60,
                height: 23,
                fit: BoxFit.contain,
              )),
          Container(
            margin: EdgeInsets.only(top: 18.w, left: 15.w),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Row(
                  children: [
                    Container(
                        alignment: Alignment.center,
                        margin: EdgeInsets.only(top: 0.w, left: 0.w),
                        child: Text(
                          logic.repaymentList![index].repayTime,
                          style: TextStyleUtils.style666666(fontSize: 12.sp),
                        )),
                    Container(
                        alignment: Alignment.center,
                        margin: EdgeInsets.only(top: 0.w, left: 30.w),
                        child: Text(
                          " ${logic.repaymentList![index].periodNum}/${logic.repaymentList![index].totalPeriodNum}期 ",
                          style: TextStyleUtils.style666666(fontSize: 12.sp),
                        )),
                  ],
                ),
                SizedBox(
                  height: 3.w,
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.start,
                  children: [
                    Container(
                        alignment: Alignment.center,
                        margin: EdgeInsets.only(top: 0.w, left: 0.w),
                        child: Text(
                          '¥',
                          style: TextStyleUtils.style000000(
                              fontSize: 16.sp, fontWeight: Medium),
                        )),
                    Container(
                        alignment: Alignment.center,
                        margin: EdgeInsets.only(top: 0.w, left: 0.w),
                        child: Text(
                          ((logic.repaymentList![index].totalRepayAmount) /
                                  100)
                              .toString(),
                          style: TextStyleUtils.style666666(
                              fontSize: 16.sp, fontWeight: Medium),
                        )),
                    ClickWidget(
                      onTap: () {
                        logic.getRepayUrl(state.orderNo);
                      },
                      child: logic.getButtonStatus(
                              logic.repaymentList![index].status)
                          ? Container(
                              width: 80.w,
                              height: 30.w,
                              alignment: const Alignment(0, 0),
                              margin: EdgeInsets.only(
                                left: 170.sp,
                              ),
                              decoration: BoxDecoration(
                                color: ColorManager.colorFFFFFF,
                                //设置四周圆角 角度 这里的角度应该为 父Container height 的一半
                                borderRadius: const BorderRadius.all(
                                    Radius.circular(15.0)),
                                //边框线宽、颜色
                                border: Border.all(
                                    width: 1.0,
                                    color: ColorManager.color1D52FF),
                              ),
                              child: Text(
                                '立即还款',
                                style: TextStyleUtils.style1D52FF(
                                    fontSize: 12.sp, fontWeight: Medium),
                              ),
                            )
                          : Container(),
                    ),
                  ],
                ),
                SizedBox(
                  height: 5.w,
                ),
                Row(
                  children: [
                    Container(
                        alignment: Alignment.center,
                        margin: EdgeInsets.only(top: 0.w, left: 0.w),
                        child: Text(
                          " 本金: ¥${((logic.repaymentList![index].repayPrincipalAmount) / 100).toString()}",
                          style: TextStyleUtils.style999999(fontSize: 12.sp),
                        )),
                    Container(
                        alignment: Alignment.center,
                        margin: EdgeInsets.only(top: 0.w, left: 30.w),
                        child: Text(
                          " 利息: ¥${((logic.repaymentList![index].repayInterestAmount) / 100).toString()}",
                          style: TextStyleUtils.style999999(fontSize: 12.sp),
                        )),
                  ],
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}
